<template>
  <div class="background">
    <div class="form-background">
      <div style="display: flex;flex-direction: column;padding: 15px;">
        <span class="title">[温州选区] 第十三届 阅读之星-全国总决选在线办理</span>
        <span style="display: flex;text-align: left;color: red;font-size: 13px">第十三届阅读之星-外文杯全国青少年阅读风采展示活动总决选办理及信息登记！请确保信息完整正确有效！仅限参选地区已晋级总决选的选手</span>
        <span style="display: flex;color: #666666;text-align: left;font-size: 13px">温馨提示：本报名表将作为登记，请确保信息完整正确有效，该信息用于参选期间保险及证书等，组委会将会严格保密。<br/>活动均自愿参与原则</span>
      </div>
      <hr style="display: flex;margin-left: 10px;margin-right: 10px">
      <div style="display: flex;flex-direction:column ;padding-left: 5px">
<!--  参选地区   选择框  -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>参选地区</span>
          <van-field
              v-model="fieldValue"
              is-link
              readonly
              placeholder="请选择参选地区"
              @click="show = true"
          />
          <div>
            <i class="el-icon-location-outline"></i>
            <span style="color: #42A4CC;font-size: 13px">选择其他地址</span>
          </div>
        </div>
<!--  语言类别   单选框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>语言类别</span>
          <el-radio v-model="radio1" label="1" border>英文组</el-radio>
          <el-radio v-model="radio1" label="2" border>中文组</el-radio>
        </div>
<!--  参选形式   选择框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>参选形式</span>
          <van-field
              v-model="wayValue"
              is-link
              readonly
              placeholder="请选择参选形式"
              @click="show1 = true"
          />
        </div>
<!--  英文组别   单选框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>英文组别</span>
          <el-radio v-model="radio2" label="1" border>A组（1-2年级）</el-radio>
          <el-radio v-model="radio2" label="2" border>B组（3-4年级）</el-radio>
          <el-radio v-model="radio2" label="3" border>C组（5-6年级）</el-radio>
          <el-radio v-model="radio2" label="4" border>D组（初中组）</el-radio>
          <el-radio v-model="radio2" label="5" border>E组（高中组）</el-radio>
          <el-radio v-model="radio2" label="6" border>K组（学前组）</el-radio>
        </div>
<!--  选手姓名   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>选手姓名</span>
          <span style="color: #666666;font-size: 12px">请确认名字正确，需与身份证姓名一致</span>
          <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入姓名"
              v-model="value2"
              clearable>
          </el-input>
        </div>
<!--  身份证号码  输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>身份证号码</span>
          <span style="color: #666666;font-size: 12px">备注：请选手及家长仔细填写，身份证号码将用于总决选期间证书及保险。护照请填写出生日期</span>
          <el-input
              prefix-icon="el-icon-postcard"
              placeholder="请输入身份证号码"
              v-model="value3"
              clearable>
          </el-input>
        </div>
<!--  出生日期   选择框      -->
        <div class="block" style="display: flex;flex-direction: column">
            <span style="color: #248DD1">出生日期</span>
            <el-date-picker
                v-model="date"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </div>
<!--  性别   单选框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>性别</span>
          <el-radio v-model="radio3" label="1" border>男</el-radio>
          <el-radio v-model="radio3" label="2" border>女</el-radio>
        </div>
<!--  所在学校   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>所在学校</span>
          <el-input
              placeholder="请输入所在学校"
              v-model="value4"
              clearable>
          </el-input>
        </div>
<!--  所在班级和班级   选择框  -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>所在班级</span>
          <van-field
              style="display: flex;margin-bottom: 5px"
              v-model="gradeValue"
              is-link
              readonly
              placeholder="请选择所在年级"
              @click="show2 = true"
          />
          <van-field
              v-model="classValue"
              is-link
              readonly
              placeholder="请选择所在班级"
              @click="show3 = true"
          />
        </div>
<!--  监护人   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>监护人</span>
          <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入监护人姓名"
              v-model="value5"
              clearable>
          </el-input>
        </div>
<!--  监护人联系方式   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>监护人联系方式</span>
          <el-input
              prefix-icon="el-icon-mobile"
              placeholder="请输入监护人联系方式"
              v-model="value6"
              clearable>
          </el-input>
        </div>
<!--  紧急联系方式   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>紧急联系方式</span>
          <el-input
              prefix-icon="el-icon-mobile"
              placeholder="请输入紧急联系方式"
              v-model="value7"
              clearable>
          </el-input>
        </div>
<!--  指导教师姓名   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>指导教师姓名</span>
          <span style="color: #666666;font-size: 12px">请核实老师真实姓名，名字将用于指导教师证书</span>
          <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入指导教师姓名"
              v-model="value8"
              clearable>
          </el-input>
        </div>
<!--  指导教师联系方式   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>指导教师联系方式</span>
          <el-input
              prefix-icon="el-icon-mobile"
              placeholder="请输入指导教师联系方式"
              v-model="value9"
              clearable>
          </el-input>
        </div>
<!--  选手靓照   上传照片      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>选手靓照</span>
          <span style="color: #0505D4;font-size: 14px">选手生活照，用于参选证制作/决选现场展示，个人近期生活竖版照片，文件15M以下。请选择眼睛看镜头、面部占照片1/8以上的半身照，尽量避免面部模糊或被部分遮挡（太阳镜或雨伞帽子等）或头顶超过照片最上边缘的照片。</span>
          <div class="img">
            <van-uploader v-model="fileList" multiple />
            <div style="display: flex;justify-content: center">
              <span style="display:flex;padding-right: 10px; color: #42A4CC">重新选择</span>
              <i style="display:flex;color: red" class="el-icon-delete"></i>
            </div>
          </div>
        </div>
<!--  参选宣言   输入框      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1">参选宣言</span>
          <span style="color: #666666;font-size: 12px">中英文均可，中文50字以内，英文200字母内</span>
          <el-input
              type="textarea"
              placeholder="请输入参选宣言"
              v-model="value10"
              :autosize="{ minRows: 2, maxRows: 3}"
              clearable>
          </el-input>
        </div>
<!--  快递地址   选择框 和 输入框 -->
        <div style="display: flex;flex-direction: column">
          <span style="color: #248DD1"><span style="color: red">* </span>快递地址</span>
          <van-field
              v-model="siteValue"
              is-link
              readonly
              placeholder="请选择地址"
              @click="show4 = true"
          />
          <el-input
              placeholder="请输入详细地址"
              v-model="value11"
              clearable>
          </el-input>
          <div>
            <i class="el-icon-location-outline"></i>
            <span style="color: #42A4CC;font-size: 13px">选择其他地址</span>
          </div>
        </div>
<!--  总决选   表单      -->
        <div style="display: flex;flex-direction: column">
          <span style="color: red">*</span>
          <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="总决选" name="1">
                <div>
                  <!--      个人组图片和标题            -->
                  <div>
                    <p style="color: #248CD2;"><img style="width: 60px;padding-left: 10px" src="../../assets/img/studentLoginBp.png" alt="个人组" align="top">&nbsp;&nbsp;&ensp;个人组<br/>
                    </p>
                  </div>
                  <!--      个人组  是否含餐食            -->
                  <div class="final">
                    <span>不含食宿<br/></span>
                    <span>全国总决选个人组<br/></span>
                    <el-button size="medium">不含食宿</el-button>
                    <el-button size="medium">含食宿</el-button>
                  </div>
                  <!--      个人组  价格和数量            -->
                  <div>
                    <span style="color: red;padding-left: 15px">¥1,780.00 <br/></span>
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
                  </div>
                </div>
                <div>
                  <!--      团体组图片和标题            -->
                  <div>
                    <p style="color: #248CD2;"><img style="width:60px; padding-left: 10px" src="../../assets/img/logo.png"
                                                    alt="团体组" align="top">&nbsp;&nbsp;&ensp;团体组<br/></p>
                  </div>
                  <!--      团体组  是否含餐食            -->
                  <div class="final">
                    <span>不含食宿<br/></span>
                    <span>总决选团体组/人<br/></span>
                    <el-button size="medium">不含食宿</el-button>
                    <el-button size="medium">含食宿</el-button>
                  </div>
                  <!--      团体组  价格和数量            -->
                  <div>
                    <span style="color: red;padding-left: 10px">¥1,000.00 <br/></span>
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                     ></el-input-number>
                  </div>
                </div>

                <div style="padding-bottom: 5px;">
                  <!--      家长陪同图片和标题            --><!--      个人组  是否含餐食            -->
                  <div>
                    <img style="width: 60px; padding-left: 10px;margin-top: 15px"
                         src="../../assets/img/teacherLoginBp.jpg" alt="家长陪同" align="top">&nbsp;&nbsp;&ensp;
                    <span style="color: #248CD2;position: relative; top: 15px;">家长陪同</span>
                    <span style="position: relative; top: 35px;left: -60px">含食宿、会务服务等</span>
                  </div>
                  <!--      家长陪同  价格和数量            -->
                  <div style="padding-top: 10px;">
                    <span style="color: red;padding-left: 10px">¥1,480.00 <br/></span>
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                     label="描述文字"></el-input-number>
                  </div>
                </div>
              </el-collapse-item>
          </el-collapse>
        </div>
<!--  总结   表单      -->
        <div style="display: flex;flex-direction: column">
            <div>
              <span>已选商品</span>
              <span><i class="el-icon-delete"></i>&ensp;清空</span>
            </div>
            <el-form ref="form" :model="sizeForm" size="medium">
              <el-form-item>
                <span>总决选<br/></span>
                <span>个人组<br/></span>
                <span>不含食宿<br/></span>
                <div>
                  <span>¥ 1,780.00</span>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                   label="描述文字"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item class="count">
                <span>团体组<br/></span>
                <span>不含食宿<br/></span>
                <div class="sum2">
                  <span>¥ 1,000.00</span>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                   label="描述文字"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item class="count">
                <span>家长陪同<br/></span>
                <div class="sum2">
                  <span>¥ 1,780.00</span>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                   label="描述文字"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item class="count-last">
                <div class="sum2">
                  <span style="color: #9A9A9A;text-align: center">共计<br/></span>
                  <span style="position: relative;top:10px;">
                    <span style="color: red">3&nbsp;</span>个商品
                    <span class="span10">应付（CNY）: <span style="color: red">&ensp;¥ 4,260</span></span>
                  </span>
                </div>
              </el-form-item>
            </el-form>
        </div>





<!--   参选地区   弹出层     -->
        <van-popup v-model="show" round position="bottom">
          <van-cascader
              v-model="cascaderValue"
              title="请选择参选地区"
              :options="options"
              active-color="#1989fa"
              @close="show = false"
              @finish="onFinish"
          />
        </van-popup>
<!--   参选形式   弹出层     -->
        <van-popup v-model="show1" round position="bottom">
          <van-cascader
              v-model="cascader1Value"
              title="请选择参选形式"
              :options="options1"
              active-color="#1989fa"
              @close="show1 = false"
              @finish="onFinish1"
          />
        </van-popup>
<!--   所在年级   弹出层     -->
        <van-popup v-model="show2" round position="bottom">
          <van-cascader
              v-model="cascader2Value"
              title="请选择年级"
              :options="options2"
              active-color="#1989fa"
              @close="show2 = false"
              @finish="onFinish2"
          />
        </van-popup>
<!--   所在班级   弹出层     -->
        <van-popup v-model="show3" round position="bottom">
          <van-cascader
              v-model="cascader3Value"
              title="请选择班级"
              :options="options3"
              active-color="#1989fa"
              @close="show3 = false"
              @finish="onFinish3"
          />
        </van-popup>
<!--   快递地址   弹出层     -->
        <van-popup v-model="show4" round position="bottom">
          <van-cascader
              v-model="siteValue"
              title="请选择参选地区"
              :options="options4"
              active-color="#1989fa"
              @close="show4 = false"
              @finish="onFinish4"
          />
        </van-popup>



      </div>
    </div>
    <span>提交即授权该表单收集你的填写信息</span>
  </div>
</template>

<script>

export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {
      //elementui
      //语言类别
      radio1: '1',
      //英文/中文组别
      radio2: '1',
      //性别
      radio3:'1',
      //vant2
      //参选地区
      show: false,
      fieldValue: '',
      cascaderValue: '',
      //参选形式
      show1:false,
      wayValue:'',
      cascader1Value:'',
      //所在班级
      show2:false,
      gradeValue:'',
      cascader2Value:'',
      //所在班级
      show3:false,
      classValue:'',
      cascader3Value:'',
      //选手姓名
      value2: '刘雨田',
      //身份证号码
      value3:'320000222200002222',
      //出生日期---element
      date: '',
      //所在学校
      value4:'温州中学',
      //监护人
      value5:'陈老师',
      //监护人联系方式
      value6:'13511111111',
      //紧急联系方式
      value7:'13522222222',
      //指导教师姓名
      value8:'陈老师',
      //指导教师联系方式
      value9:'13533333333',
      //图片预览
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        //{ url: 'https://cloud-image', isImage: true },
      ],
      //参选宣言
      value10:'感觉很好是我想参加的大赛',
      //快递地址
      show4:false,
      siteValue:'',
      cascader4Value:'',
      value11:'温州中学',
      //总决选
      activeNames: ['1'],

      // 参选地区---选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{text: '杭州市', value: '330100'}],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{text: '南京市', value: '320100'}],
        },
      ],
      //参选形式---选项列表，children 代表子选项，支持多级嵌套
      options1:[
        {
          text: '个人组',
          value: '200001',},
        {
          text: '团体组',
          value: '200002',},
      ],
      //所在年级---选项列表，children 代表子选项，支持多级嵌套
      options2:[
          {
        text: '初中',
        value: '430000',
        children: [
            {text: '一年级', value: '430100'},
            {text: '二年级', value: '430200'},
            {text: '三年级', value: '430300'},
        ],
      },
        {
          text: '高中',
          value: '420000',
          children: [
              {text: '一年级', value: '420100'},
              {text: '二年级', value: '420200'},
              {text: '三年级', value: '420300'},
          ],
        },
      ],
      //所在班级---选项列表，children 代表子选项，支持多级嵌套
      options3:[
        {
          text: '1班',
          value: '300001',},
        {
          text: '2班',
          value: '300002',},
        {
          text: '3班',
          value: '300003',},
      ],
      //快递地址---选项列表，children 代表子选项，支持多级嵌套
      options4: [
        {
          text: '浙江省',
          value: '530000',
          children: [{text: '杭州市', value: '530100',children:[{text:'普陀区',value:'530101',}]}],
        },
        {
          text: '江苏省',
          value: '520000',
          children: [{text: '南京市', value: '520100'}],
        },
      ],
    };

  },
  methods: {
    // 参选地区----全部选项选择完毕后，会触发 finish 事件
    onFinish({selectedOptions}) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    // 参选形式----全部选项选择完毕后，会触发 finish 事件
    onFinish1({selectedOptions}){
      this.show1 = false;
      this.wayValue = selectedOptions.map((option) => option.text).join('/');
    },
    // 所在年级----全部选项选择完毕后，会触发 finish 事件
    onFinish2({selectedOptions}) {
      this.show2 = false;
      this.gradeValue = selectedOptions.map((option) => option.text).join('');
    },
    // 所在班级----全部选项选择完毕后，会触发 finish 事件
    onFinish3({selectedOptions}) {
      this.show3 = false;
      this.classValue = selectedOptions.map((option) => option.text).join('/');
    },
    //上传照片
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    //快递地址---全部选项选择完毕后，会触发 finish 事件
    onFinish4({selectedOptions}) {
      this.show4 = false;
      this.siteValue = selectedOptions.map((option) => option.text).join('/');
    },
    //总决选
    handleChange(val) {
      console.log(val);
    }


  }
}
</script>

<style scoped>
/*背景图*/
.background{
  display: flex;
  flex-direction: column;
  background-image: url("../../assets/img/h5Background.jpg");
}

/*表单的背景及布局*/
.form-background{
  display: flex;
  flex-direction: column;
  background-color: rgb(255,255,255,0.8);
  margin: 10px;
  border-radius: 10px;
}

/*标题样式*/
.title{
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  text-align: center;
  color: #3A2569;
  font-size: 22px
}

/*选手靓照盒子*/
.img{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 120px;
  background-color: rgb(255,255,255,0.5)
}
/*总决选*/
.final{
  display: flex;
  flex-direction:column;
  background-color: #F9F9F9;
  color: #6A6A6A;
  font-size: 13px;
  padding: 10px;
}


</style>
